<ng-template #inputTemplate>
  <input
    #inputElement
    autocomplete="something-new"
    class="ant-select-search__field"
    (compositionstart)="isComposing = true"
    (compositionend)="isComposing = false"
    [ngModel]="inputValue"
    (ngModelChange)="setInputValue($event)"
    [disabled]="nzSelectService.disabled"
  />
  <span #mirrorElement class="ant-select-search__field__mirror"></span>
</ng-template>
<div class="ant-select-selection__rendered">
  <div
    *ngIf="nzPlaceHolder"
    nz-select-unselectable
    [style.display]="placeHolderDisplay"
    class="ant-select-selection__placeholder"
  >
    {{ nzPlaceHolder }}
  </div>
  <!--single mode-->
  <ng-container *ngIf="nzSelectService.isSingleMode">
    <!--selected label-->
    <div
      *ngIf="
        nzSelectService.listOfCachedSelectedOption.length &&
        nzSelectService.listOfSelectedValue.length
      "
      class="ant-select-selection-selected-value"
      [attr.title]="nzSelectService.listOfCachedSelectedOption[0]?.nzLabel"
      [ngStyle]="selectedValueStyle"
    >
      <ng-container
        *nzStringTemplateOutlet="
          nzCustomTemplate;
          context: { $implicit: nzSelectService.listOfCachedSelectedOption[0] }
        "
      >
        <ng-container>{{ nzSelectService.listOfCachedSelectedOption[0]?.nzLabel }}</ng-container>
      </ng-container>
    </div>
    <!--show search-->
    <div
      *ngIf="nzShowSearch"
      class="ant-select-search ant-select-search--inline"
      [style.display]="nzOpen ? 'block' : 'none'"
    >
      <div class="ant-select-search__field__wrap">
        <ng-template [ngTemplateOutlet]="inputTemplate"></ng-template>
      </div>
    </div>
  </ng-container>
  <!--multiple or tags mode-->
  <ul *ngIf="nzSelectService.isMultipleOrTags">
    <ng-container
      *ngFor="
        let option of nzSelectService.listOfCachedSelectedOption | slice: 0:nzMaxTagCount;
        trackBy: trackValue;
        let index = index
      "
    >
      <li
        [@zoomMotion]
        [@.disabled]="noAnimation?.nzNoAnimation"
        [nzNoAnimation]="noAnimation?.nzNoAnimation"
        [attr.title]="option.nzLabel"
        [class.ant-select-selection__choice__disabled]="option.nzDisabled"
        (@zoomMotion.done)="animationEnd()"
        class="ant-select-selection__choice"
      >
        <ng-container
          *nzStringTemplateOutlet="
            nzCustomTemplate;
            context: { $implicit: nzSelectService.listOfCachedSelectedOption[index] }
          "
        >
          <div class="ant-select-selection__choice__content">{{ option.nzLabel }}</div>
        </ng-container>
        <span
          *ngIf="!option.nzDisabled"
          class="ant-select-selection__choice__remove"
          (mousedown)="$event.preventDefault()"
          (click)="removeSelectedValue(option, $event)"
        >
          <i
            nz-icon
            nzType="close"
            class="ant-select-remove-icon"
            *ngIf="!nzRemoveIcon; else nzRemoveIcon"
          ></i>
        </span>
      </li>
    </ng-container>
    <li
      *ngIf="nzSelectService.listOfCachedSelectedOption.length > nzMaxTagCount"
      [@zoomMotion]
      [@.disabled]="noAnimation?.nzNoAnimation"
      [nzNoAnimation]="noAnimation?.nzNoAnimation"
      (@zoomMotion.done)="animationEnd()"
      class="ant-select-selection__choice"
    >
      <div class="ant-select-selection__choice__content">
        <ng-container *ngIf="nzMaxTagPlaceholder">
          <ng-template
            [ngTemplateOutlet]="nzMaxTagPlaceholder"
            [ngTemplateOutletContext]="{
              $implicit: nzSelectService.listOfSelectedValue | slice: nzMaxTagCount
            }"
          >
          </ng-template>
        </ng-container>
        <ng-container *ngIf="!nzMaxTagPlaceholder">
          + {{ nzSelectService.listOfCachedSelectedOption.length - nzMaxTagCount }} ...
        </ng-container>
      </div>
    </li>
    <li class="ant-select-search ant-select-search--inline">
      <ng-template [ngTemplateOutlet]="inputTemplate"></ng-template>
    </li>
  </ul>
</div>
<span
  *ngIf="nzAllowClear && nzSelectService.listOfSelectedValue.length"
  class="ant-select-selection__clear"
  nz-select-unselectable
  (mousedown)="$event.preventDefault()"
  (click)="onClearSelection($event)"
>
  <i
    nz-icon
    nzType="close-circle"
    nzTheme="fill"
    *ngIf="!nzClearIcon; else nzClearIcon"
    class="ant-select-close-icon"
  ></i>
</span>
<span class="ant-select-arrow" nz-select-unselectable *ngIf="nzShowArrow">
  <i nz-icon nzType="loading" *ngIf="nzLoading; else defaultArrow"></i>
  <ng-template #defaultArrow>
    <i
      nz-icon
      nzType="down"
      class="ant-select-arrow-icon"
      *ngIf="!nzSuffixIcon; else nzSuffixIcon"
    ></i>
  </ng-template>
</span>
